<script setup>
import {computed} from "vue";

defineOptions({
  name: 'AeButton'
})
const emit = defineEmits(['click'])
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  size: {
    type: String,
    default: 'default'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  around: {
    type: Boolean,
    default: false
  },
  plane: {
    type: Boolean,
    default: false
  },
})
const classes = computed(() => {
  const prefixCls = 'ae-button'
  const {type, size, plane, around, disabled} = props
  return {
    [prefixCls]: true,
    [`${prefixCls}-${type.trim()}`]: type,
    [`${prefixCls}-size-${size.trim()}`]: size,
    [`${prefixCls}-${type.trim()}-plane`]: plane,
    [`${prefixCls}-around`]: around,
    [`${prefixCls}-${type.trim()}-around`]: around,
    ['is-disabled']: disabled

  }
})
const handlerClick = (e) => {
  emit('click', e)
}
</script>

<template>
<button :class="classes" :disabled="disabled" @click="handlerClick">
  <slot></slot>
</button>
</template>

<style scoped lang="scss">
$button_hover_opacity: 0.7;
@mixin reset_button($cursor: pointer,$background: transparent, $border: none, $outline: none) {
  cursor: $cursor;
  background: $background;
  border: $border;
  outline: $outline;
}

button {
  @include reset_button();
  &:hover {
    @include reset_button();
  }
  &:focus {
    @include reset_button();
  }
  &:active {
    @include reset_button();
  }
  &:disabled {
    @include reset_button(not-allowed);
  }
  &:focus-visible {
    @include reset_button();
  }
  &::-moz-focus-inner {
    @include reset_button();
  }
  &:focus:not(:focus-visible) {
    @include reset_button();
  }
  &::-moz-focusring {
    @include reset_button();
  }
  &::-moz-focus-outer {
    @include reset_button();
  }
}
.ae-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  line-height: 100%;
  padding: 0 16px;
  transition: all .5s;
  margin: 0 8px;
}


@mixin models_status($background_color,$border,$color,$opacity: 1) {
  background-color: $background_color;
  border: $border;
  color: $color;
  opacity: $opacity;
  box-shadow: $color 0 0 1px;
}
@mixin ae_button_style_default($name,$background_color,$border,$color,$opacity: 1, $border_radius: 8px) {
  .ae-button-#{$name} {
    background-color: $background_color;
    border: $border;
    border-radius: $border_radius;
    opacity: $opacity;
    color: $color;
  }
  .ae-button-#{$name}.is-disabled {
    &:disabled {
      background-color: $background_color;
      border: $border;
      opacity: 0.68;
      color: $color;
      box-shadow: $color 0 0 1px;
    }
  }
}
@mixin ae_button_style_status($name,$background_color,$border,$color,$opacity: 1) {
  .ae-button-#{$name} {
    &:not(.is-disabled) {
      &:hover{
        @include models_status($background_color,$border,$color,$opacity)
      }
      &:active {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &:visited {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &:focus-visible {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &::-moz-focus-inner {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &:focus:not(:focus-visible) {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &::-moz-focusring {
        @include models_status($background_color,$border,$color,$opacity)
      }
      &::-moz-focus-outer {
        @include models_status($background_color,$border,$color,$opacity)
      }
    }
  }
}

@mixin ae_button_size($name,$height,$font_size: 14px) {
  .ae-button-size-#{$name} {
    height: $height;
    font-size: $font_size;
  }
  .ae-button-size-#{$name}.ae-button-around {
    border-radius: calc($height/2);
  }
}
/**
 * @Description: 按钮样式的函数调用
 * @Params: name, background-color, border, color, opacity
 * @CreateTime: 2023/7/12
 * @Author: Zeman
 *
 */
@include ae_button_style_default(default, #f5f5f5, 1px solid #bdbdbd, #5b5b5b);
@include ae_button_style_status(default, #f5f5f5, 1px solid #249CFF, #249CFF);

@include ae_button_style_default(primary, #249CFF, 1px solid #249CFF, #ffffff, 1);
@include ae_button_style_status(primary, #249CFF, 1px solid #249CFF, #ffffff, $button_hover_opacity);
@include ae_button_style_default(primary-plane, #e0f0ff, 1px solid #249CFF, #249CFF, 1);
@include ae_button_style_status(primary-plane, #249CFF, 1px solid #249CFF, #FFFFFF, 1);

@include ae_button_style_default(warning, #E6B750, 1px solid #E6B750, #ffffff, 1);
@include ae_button_style_status(warning, #E6B750, 1px solid #E6B750, #ffffff,  $button_hover_opacity);
@include ae_button_style_default(warning-plane, #fff4e9, 1px solid #d59500, #d59500, 1);
@include ae_button_style_status(warning-plane, #E6B750, 1px solid #E6B750, #FFFFFF, 1);

@include ae_button_style_default(danger, #F06464, 1px solid #F06464, #ffffff, 1);
@include ae_button_style_status(danger, #F06464, 1px solid #F06464, #ffffff,  $button_hover_opacity);
@include ae_button_style_default(danger-plane, #ffebeb, 1px solid #FFA5A5, #F54141, 1);
@include ae_button_style_status(danger-plane, #F06464, 1px solid #F06464, #FFFFFF, 1);

@include ae_button_style_default(success, #64C849, 1px solid #64C849, #ffffff, 1);
@include ae_button_style_status(success, #64C849, 1px solid #64C849, #ffffff, $button_hover_opacity);
@include ae_button_style_default(success-plane, #edffe5, 1px solid #64C849, #64C849, 1);
@include ae_button_style_status(success-plane, #64C849, 1px solid #64C849, #FFFFFF, 1);

/**
 * @Description: 按钮大小的函数调用
 * @Params: name, height, font-size
 * @CreateTime: 2023/7/12
 * @Author: Zeman
 *
 */
@include ae_button_size(default, 40px, 14px);
@include ae_button_size(medium, 40px, 14px);
@include ae_button_size(small, 32px, 12px);
@include ae_button_size(mini, 28px, 12px);
</style>